<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Table Hover Effect</title>
</head>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

td,th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}


.bg {
    background-color: lightgray;
}
</style>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>牛仔外套</td>
                <td>99元</td>
                <td>1</td>
                <td>99元</td>
            </tr>
            <tr>
                <td>02</td>
                <td>帽子</td>
                <td>25元</td>
                <td>2</td>
                <td>50元</td>
            </tr>
            <tr>
                <td>03</td>
                <td>双肩包</td>
                <td>100元</td>
                <td>1</td>
                <td>100元</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    
    let trs=document.querySelector('tbody').querySelectorAll('tr');
    for(let i=0;i<trs.length;i++){
        trs[i].onmouseover=function(){
            this.className='bg';
        };
        trs[i].onmouseout=function(){
            this.className='';
        }
    }
    
</script>
</html>